<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        // 普通函数与箭头函数简单对比
        let fun1 = function(){}
        let fun2 = () => {} // 箭头函数不需要写function关键字，小括号代表参数，大括号代表方法体

        // 只有一个参数的话，箭头函数可以省略小括号，多个参数或者没有参数不可以省略小括号
        let fun3 = function(x){}
        let fun4 = x => {}

        // 只有一行代码的方法体，可以省略大括号
        // let fun5 = function(x){console.log(x)}
        // let fun6 = x => console.log(x)

        // 只有一行代码的方法体，且这行代码是返回值时，可以省略大括号和return关键字
        let fun7 = function(x){return x+1}
        let fun8 = x => x+1

         
        // 箭头函数中的this与普通函数中的this不一样，一般普通函数中的this表示对象本身，而箭头函数中的this表示外层的对象
        let person = {
            name: "张三",
            showName: function() {
                console.log(this.name)
                console.log(this)
            },
            viewName: () => {
                console.log(this.name) // 这里打印的是空，因为这个this指代的是person对象的上层即window对象，而window没有name属性
                console.log(this)
            }
        }
        person.showName()
        person.viewName()

        // 需求：div背景色是红色，点击div2秒后变成黄色
        window.onload = function() {
            let div = window.document.getElementById("div");
            console.log("a:" + this)
            div.onclick = function(){
                console.log("b:" + this)
                setTimeout(() => {
                    console.log("c:" + this)
                    this.style.backgroundColor = "yellow"
                }, 2000);
            }
        }
    </script>
</head>
<body>
    <div id="div"></div>
    
</body>
</html>